<template>
  <div>
    <el-card shadow="never" class="card">
      <el-form ref="searchform" :model="page">
        <el-form-item label="设备编号：">
          <el-input
            v-model="page.innerCode"
            class="elinput1"
            placeholder="请输入"
            clearable
          />
          <el-button type="primary" class="inquire" icon="el-icon-search" size="small" @click="inquire">查询</el-button>
        </el-form-item>

      </el-form>
    </el-card>
    <el-card shadow="never">
      <el-button class="btn1" size="small" icon="el-icon-circle-plus-outline" @click="addList">新建</el-button>
      <el-button class="btn2" size="small" @click="bulkOperations">批量操作</el-button>
      <!-- @select-all="selectAllFn" -->
      <el-table
        :data="listOfVendingMachinesList"
        style="width: 100%"
        @select="selectFn"
        @select-all="selectAllFn"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column label="序号" type="index" width="100" />
        <el-table-column
          prop="innerCode"
          label="设备编号"
        />
        <el-table-column
          prop="type.name"
          label="设备型号"
        />
        <el-table-column
          prop="dizhi"
          label="详细地址"
        />
        <el-table-column
          prop="node.ownerName"
          label="合作商"
        />
        <el-table-column
          prop="zhuangtai"
          label="设备状态"
        />
        <el-table-column
          label="操作"
        >
          <template #default="{ row }">
            <el-link type="primary" @click="channelList(row)">渠道</el-link>
            <el-link type="primary" @click="tactics(row)">策略</el-link>
            <el-link type="primary" @click="editList(row)">修改</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page.pageIndex"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 添加对话框 -->
    <el-dialog
      title="新增设备"
      :visible.sync="adddialog"
      width="30%"
      @close="addClose"
    >
      <el-form ref="addFromrule" :model="addFrom" :rules="addFromrules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="设备编号:">
          <div>系统自动生成</div>
        </el-form-item>
        <el-form-item label="选择型号:" prop="vmType">
          <el-select v-model="addFrom.vmType" placeholder="请输入">
            <el-option v-for="(item,i) in vendingMachine" :key="i" :label="item.name" :value="item.typeId" />
          </el-select>
        </el-form-item>
        <el-form-item label="选择点位:" prop="nodeId">
          <el-select v-model="addFrom.nodeId" placeholder="请输入">
            <el-option v-for="(item,i) in selectAPoint" :key="i" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="adddialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmTheAddition">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 批量策略管理 -->
    <el-dialog
      title="批量策略管理"
      :visible.sync="managedialog"
      width="40%"
    >
      <el-form ref="form" :model="bulk" label-width="100px">
        <el-form-item label="选择策略：">
          <el-select v-model="bulk.policyId" placeholder="请选择">
            <el-option v-for="(item,i) in tacticsList" :key="i" :label="item.policyName" :value="item.policyId" />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="managedialog = false">取 消</el-button>
        <el-button type="primary" @click="applyThePolicyList">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 详情对话框 -->
    <el-dialog
      title="货道设置"
      :visible.sync="detaildialog"
      width="50%"
    >
      <div>
        <div class="box1">
          <div class="header">
            <div>
              货道行数：{{ machineList.vmRow }}
            </div>
            <div>
              货道列数：{{ machineList.vmCol }}
            </div>
            <div>
              货道容量（个）:{{ machineList.channelMaxCapacity }}
            </div>
          </div>
          <div>
            <el-button type="primary" class="inquire" size="small" @click="intelligentScheduling">智能排货</el-button>
          </div>
        </div>
        <div class="rowbox">
          <i class="el-icon-arrow-left" />
          <i class="el-icon-arrow-right" @click="offSetof" />
          <el-scrollbar :native="false">
            <el-row v-for="(num,index) in isbool.row" :key="index" class="rowtis" type="flex">
              <el-col v-for="(item) in cargoLane.slice(isbool.col * index,isbool.col * num)" :key="item.channelCode" :span="12">
                <div style="width:170px;">
                  <div class="head">

                    <div class="color"><div>{{ item.channelCode }}</div> </div>
                    <div class="imgs">
                      <img :src="item.sku ? item.sku.skuImage : ''" alt="">
                    </div>
                    <div class="txt">{{ item.sku ? item.sku.skuName : '暂无商品' }}</div>
                    <div class="btns">
                      <!-- <template v-slot="scope"> -->
                      <el-link type="primary" @click="add(item.channelCode)">添加</el-link>
                      <el-link type="danger" @click="dele(item.channelCode)">删除</el-link>
                      <!-- </template> -->
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-scrollbar>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addSearchres">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 智能排货 -->
    <el-dialog
      title="智能排货"
      :visible.sync="smartFilteringdialog"
      width="50%"
    >
      <div class="thead">该区域属于{{ shopping.name }}商圈适合销售一下商品：</div>
      <div class="paihuo">
        <div v-for="item in recommendList" :key="item.classId">
          <img :src="item.image" alt="" class="imgs">
          <div>{{ item.skuName }}</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="smartFilteringdialog = false">采纳建议</el-button>
      </span>
    </el-dialog>

    <!-- 策略对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="tacticsListdialog"
      width="30%"
    >
      <div class="celuebox">
        <div>机器编号：{{ tacticsLists.innerCode }}</div>
        <div>策略名称：{{ tacticsLists.policyName }}</div>
        <div>策略方案：{{ tacticsLists.vmId }}</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="tacticsListdialog = false">取 消</el-button>
        <el-button type="primary" @click="tacticsListdialog = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="editDialog"
      width="30%"
    >
      <el-form ref="form" :model="row" label-width="120px">
        <el-form-item label="机器编号：">
          <div>{{ row.innerCode }}</div>
        </el-form-item>
        <el-form-item label="供货时间：">
          <div>{{ row.createTime }}</div>
        </el-form-item>
        <el-form-item label="设备类型：">
          <div>{{ rows.name }}</div>
        </el-form-item>
        <el-form-item label="设备容量：">
          <div>{{ rows.vmCol }}</div>
        </el-form-item>
        <el-form-item label="设备点位：">
          <el-select v-model="isId" placeholder="请选择活动区域">
            <el-option v-for="item in mapList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="合作商：">
          <div>{{ row.ownerName }}</div>
        </el-form-item>
        <el-form-item label="所属区域：">
          <div>{{ rows.names }}</div>
        </el-form-item>
        <el-form-item label="设备地址：">
          <div>{{ row.dizhi }}</div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button type="primary" @click="editLists">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 选择商品 -->
    <el-dialog
      title="选择商品"
      :visible.sync="adddialogs"
      width="50%"
    >
      <div>
        <el-form ref="form" :model="page2" label-width="120px">
          <el-form-item label="商品名称：">
            <el-input v-model="page2.skuName" />
            <el-button icon="el-icon-search" class="inputs">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="icon">
          <i class="el-icon-arrow-left" :class="{colors :this.page2.pageIndex === 1 }" @click="addicon" />
          <i class="el-icon-arrow-right" :class="{colors :this.page2.pageIndex === 13 }" @click="deleicon" />
        </div>
        <div class="textbox">
          <div v-for="(item,i) in queryList" :key="i" class="box" :class="{red:isShowNum === i }" @click="addsearch(item,i)">
            <div>
              <div>
                <img :src="item.skuImage" alt="">
              </div>
              <div>{{ item.brandName }}</div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="adddialogsList">确 认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { listOfVendingMachinesAPI, vendingMachineSearchAPI, selectAPointAPI, addedVendingMachinesAPI, policyManagementAPI, applyThePolicy, detailsOfVendingMachineTypeAPI, cargoChannelDetailsAPI, topSalesAPI, vendingMachineStrategyAPI, mapApi, mapsAPI, kepalaveAPI, addList } from '@/api/deviceManagement'
export default {
  data() {
    return {
      innerCode: '',
      list: [],
      sku: {},
      index: '',
      isShowNum: -1,
      page2: {
        pageIndex: 1,
        pageSize: 10,
        skuName: ''
      },
      queryList: [],
      adddialogs: false,
      shopping: {
        ids: null,
        name: ''
      },
      // 页码值
      page: {
        pageIndex: 1,
        pageSize: 10,
        innerCode: ''
      },
      // 新增数据
      addFrom: {
        createUserId: 1,
        nodeId: '',
        vmType: null
      },
      // 批量操作
      bulk: {
        policyId: null,
        innerCodeList: []
      },
      // 售货机详情
      machineList: {},
      // 策略
      tacticsLists: {},
      // 售货机货道详情
      cargoLane: [],
      totalCount: null,
      listOfVendingMachinesList: [],
      // 选中状态数据
      selection: [],
      // 售货机数据
      vendingMachine: [],
      // 点位列表数据
      selectAPoint: [],
      // 策略管理数据
      tacticsList: [],
      // 推荐货物
      recommendList: [],
      // 添加对话框
      adddialog: false,
      // 策略管理对话框
      managedialog: false,
      // 详情对话框
      detaildialog: false,
      // 智能排货
      smartFilteringdialog: false,
      //  策略对话框
      tacticsListdialog: false,
      // 修改对话框
      editDialog: false,
      // 新增验证规则
      addFromrules: {
        vmType: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        nodeId: [
          { required: true, message: '请选择', trigger: 'blur' }
        ]
      },
      row: {

      },
      rows: {
        vmCol: '',
        name: '',
        names: ''
      },
      isId: null,
      nodeId: null,
      mapList: [],
      isbool: {
        col: null,
        row: null
      }
    }
  },
  created() {
    // 初始数据
    this.getlistOfVendingMachines()
  },
  methods: {
    // 初始数据
    async getlistOfVendingMachines() {
      const res = await listOfVendingMachinesAPI(this.page)
      this.listOfVendingMachinesList = res.currentPageRecords
      this.totalCount = res.totalCount - 0
      this.listOfVendingMachinesList.forEach(item => {
        if (item.vmStatus === 0) {
          item.zhuangtai = '未投放'
        } else if (item.vmStatus === 1) {
          item.zhuangtai = '运营'
        } else {
          item.zhuangtai = '撤机'
        }
        item.dizhi = item.node.addr.substring(12, 99)
      })
    },
    inquire() {
      this.getlistOfVendingMachines()
    },
    // 页码值切换逻辑
    handleSizeChange(newSize) {
      this.page.pageSize = newSize
      this.getlistOfVendingMachines()
    },
    handleCurrentChange(newNum) {
      this.page.pageIndex = newNum
      this.getlistOfVendingMachines()
    },
    selectFn(selection) {
      this.selection = selection
      this.bulk.innerCodeList = []
      this.selection.forEach((item, index) => {
        this.bulk.innerCodeList[index] = item.innerCode
      })
    },
    selectAllFn(selection) {
      this.selection = selection
      this.bulk.innerCodeList = []
      this.selection.forEach((item, index) => {
        this.bulk.innerCodeList[index] = item.innerCode
      })
    },
    // 批量操作按钮
    async bulkOperations() {
      if (this.selection.length === 0) {
        return this.$message.warning('请勾选售货机')
      } else {
        const res = await policyManagementAPI()
        this.tacticsList = res
        // console.log(this.tacticsList)
        this.managedialog = true
      }
    },
    // 新建按钮
    async addList() {
      this.adddialog = true
      const res = await vendingMachineSearchAPI()
      this.vendingMachine = res.currentPageRecords
      const prve = await selectAPointAPI()
      this.selectAPoint = prve.currentPageRecords
    },
    // 确定添加
    confirmTheAddition() {
      this.$refs.addFromrule.validate(async(valid) => {
        if (!valid) return
        await addedVendingMachinesAPI(this.addFrom)
        this.$message.success('添加成功！')
        this.adddialog = false
        this.getlistOfVendingMachines()
      })
    },
    // 添加对话框关闭
    addClose() {
      this.$refs.addFromrule.resetFields()
    },
    // 确定更改策略
    async applyThePolicyList() {
      await applyThePolicy(this.bulk)
      this.$message.success('更改成功！')
    },
    // 渠道按钮
    async channelList(row) {
      // 售货机类型详情
      this.shopping.name = row.node.businessType.name
      this.shopping.ids = row.businessId
      console.log(row)
      const res = await detailsOfVendingMachineTypeAPI(row.vmType)
      this.machineList = res
      this.isbool.col = res.vmCol
      this.isbool.row = res.vmRow
      console.log(this.machineList)
      // 获取售货机货道详情
      const prve = await cargoChannelDetailsAPI(row.innerCode)
      this.innerCode = row.innerCode
      this.cargoLane = prve
      // console.log(this.cargoLane)
      this.detaildialog = true
    },
    async  intelligentScheduling() {
      const res = await topSalesAPI(this.shopping.ids)
      this.recommendList = res
      // console.log(res)
      this.smartFilteringdialog = true
    },
    // 策略按钮
    async tactics(row) {
      const res = await vendingMachineStrategyAPI(row.innerCode)
      this.tacticsLists = res
      this.tacticsListdialog = true
      console.log(res)
    },
    // 修改
    async editList(row) {
      console.log(row)
      this.editDialog = true
      this.row = row
      this.rows.vmCol = row.type.vmCol
      this.rows.name = row.type.name
      this.rows.names = row.region.name
      const res = await mapApi()
      this.isId = row.id
      this.mapList = res.currentPageRecords
      this.nodeId = row.nodeId
    },
    // 点击修改
    async editLists() {
      await mapsAPI(this.isId, this.nodeId)
      this.getlistOfVendingMachines()
      this.$message.success('修改成功！')
      this.editDialog = false
    },
    // 移动
    offSetof() {
      const left = document.querySelector('.el-scrollbar')
      console.log(left.offsetleft)
    },
    // 渠道添加和删除
    dele(index) {
      this.index = index
      console.log(this.index)
      this.cargoLane.forEach(item => {
        if (item.sku !== null) {
          if (item.channelCode === index) {
            item.sku = null
            item.skuId = 0
          }
        }
      })
      console.log(this.cargoLane)
    },
    async add(index) {
      this.adddialogs = true
      const res = await kepalaveAPI(this.page2)
      this.queryList = res.currentPageRecords
      console.log(this.queryList)
      this.index = index
    },
    async  addicon() {
      this.isShowNum = -1
      if (this.page2.pageIndex >= 2) {
        this.page2.pageIndex -= 1
      }
      await kepalaveAPI(this.page2)
      console.log(this.page2.pageIndex)
      this.add()
    },
    async deleicon() {
      this.isShowNum = -1
      if (this.page2.pageIndex <= 12) {
        this.page2.pageIndex += 1
      }
      await kepalaveAPI(this.page2)
      console.log(this.page2.pageIndex)
      this.add()
    },
    addsearch(sku, i) {
      this.sku = sku
      console.log(this.sku)
      this.isShowNum = i
    },
    adddialogsList() {
      this.cargoLane.forEach(item => {
        if (item.channelCode === this.index) {
          item.sku = this.sku
          item.skuId = this.sku.skuId
        }
      })
      this.adddialogs = false
    },
    async  addSearchres() {
      console.log(this.cargoLane)
      this.cargoLane.forEach(item => {
        this.list.push({ channelCode: item.channelCode, skuId: item.skuId })
      })
      console.log(this.list)
      await addList({ channelList: this.list, innerCode: this.innerCode })
      this.$message.success('你添加成功了！！！')
      this.detaildialog = false
      this.getlistOfVendingMachines()
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  margin-bottom: 15px;
  height: 85px;

}
.el-btn {
  margin-bottom: 15px;
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  color: #fff;
  height: 36px;
}
.elinput1{
  width: 200px;
   height: 30px;
   line-height: 20px;
   margin-right: 20px;
   ::v-deep .el-input__inner {
    height: 30px !important;
    line-height: 30px !important;
   }
}
.inquire{
  background-color: #5f84ff !important;
  height: 30px;
  // width: 70px;
}
.btn1{
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    border: 0;
    color: #fff;

}
.btn2{
  width: 80px!important;
    height: 36px;
    padding: 0;
    background-color: #fbf4f0!important;
    height: 30px;
}
.el-link{
  margin-right: 10px;
}
.el-pagination{
  margin-top: 15px;
}
.el-select{
  width: 100%;
}
.box1{
  width: 100%;
  padding: 0 30px;
  height: 60px;
  background-color: #f4f6fa;
  display: flex;
  justify-content: space-between;
  line-height: 60px;
  .header{
    width: 400px;
    display: flex;
  justify-content: space-between;
  }
}
.thead{
  margin-bottom: 15px;
}
.imgs{
  width: 84px;
  height: 84px;
}
.paihuo{
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  text-align: center;
  div{
    width: 134px;
    height: 134px;
    font-size: 12px;
  }
}
.celuebox{
  padding: 0 30px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  div{
    width: 50%;
    margin-top: 20px;
  }
}
.rowtis{

}
.rowbox{
  position: relative;
  width: 100% !important;
  height: 400px;
  padding:20px 20px 0 20px;
  // background-color: skyblue;
  .head{
    height: 135px;
    width: 150px;
    padding-top: 16px;
    background-color: rgb(246, 247, 251);
  }
  .btns{
    width: 150px;
    height: 52px;
    background-color: #fff;
    box-shadow: rgb(0 0 0 / 6%) 0px 2px 4px 0px;
    text-align: center;
    .el-link{
      margin-top: 20px;
    }
  }
  .txt{
    text-align: center;
}
  .color{
    // position: absolute;
    // top: 10px;
    // left: 0px;
    width: 43px;
    height: 23px;
    line-height: 23px;
    background: rgb(130, 155, 237);
    border-radius: 0px 10px 10px 0px;
    font-size: 12px;
    color: rgb(255, 255, 255);
    div{
      margin-left: 8px;
    }

  }
  .imgs{
    width: 84px;
    height: 78px;
    margin-bottom: 5px;
    margin-top: -10px;
    object-fit: contain;
    margin-left: 30px;
    img{
      width: 100%;
      height: 100%;
    }
  }
}
.el-row {
    display: flex;
  // justify-content: space-evenly;
  // width: 100% !important;
  margin-bottom: 20px;
  margin-left: -8px;
    margin-right: -8px;
}
.el-scrollbar{
  height: 400px !important;
  width: 100%;

}
.el-col {
  width: 150px !important;
  height: 180px !important;
  background-color: skyblue;
  margin-right: 8px;
  margin-left: 8px;

}
.el-icon-arrow-left{
  position: absolute;
  left: -20px;
  top: 185px;
  width: 50px;
  height: 50px;
  font-size: 50px;
  z-index: 999;
}
.el-icon-arrow-right{
  position: absolute;
  z-index: 999;
  right: -20px;
  top: 185px;
  width: 50px;
  height: 50px;
  font-size: 50px;
}
.el-input{
  width: 400px;
}
.inputs{

  align-items: center;
    min-width: 80px;
    height: 36px;
    padding: 0px;
    background-color: rgb(95, 132, 255);
    border: none;
    color: #fff;
    margin-left: 15px;
}
.icon{
  .el-icon-arrow-left{
    margin-left: 20px;
    margin-top: 105px;
  }
  .el-icon-arrow-right{
    margin-right: 20px;
    margin-top: 105px;
  }
}
.textbox{
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  padding: 30px;
  text-align: center;

  .box{
    width: 18%;
    margin-right: 10px;
    height: 140px;
    margin-bottom: 10px;
    background-color: rgb(246, 247, 251);
    padding-top: 20px;
    img{
      width: 78px;
      height: 78px;
    }
  }
}
.colors{
  color: rgb(216, 221, 227);
}
.red{
  background: url('') no-repeat;
}
</style>
